<template>
    <div class="admin-management-container">
        <pageTitle :title="'管理員管理'" />

        <!-- 顶部搜索和按钮区域 -->
        <div class="top-action-bar">
            <el-row :gutter="20" align="middle">
                <el-col :span="6">
                    <el-input placeholder="請輸入關鍵字" v-model="searchQuery" class="search-input-with-button" clearable>
                        <template #append>
                            <el-button type="primary">
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="18" class="action-buttons">
                    <el-button type="primary">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        <span>新增管理員</span>
                    </el-button>
                    <el-button>
                        <el-icon>
                            <Setting />
                        </el-icon>
                        <span>權限組管理</span>
                    </el-button>
                </el-col>
            </el-row>
        </div>

        <!-- 管理員表格 -->
        <div class="admin-table-card">
            <el-table :data="adminList" style="width: 100%" v-loading="loading" :border="false" :header-cell-style="{
                borderBottom: '1px solid #ebeef5',
                textAlign: 'center',
                background: '#f8fafc',
                fontWeight: '600',
                color: '#333',
                padding: '20px'
            }" :cell-style="{
                borderBottom: '1px solid #ebeef5',
                textAlign: 'center'
            }">
                <el-table-column label="管理員信息" width="220" align="center">
                    <template #default="{ row }">
                        <div class="admin-info">
                            <div class="admin-name">{{ row.name }}</div>
                            <div class="admin-phone">{{ row.phone }}</div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="manageScope" label="管理范圍" align="center">
                    <template #default="{ row }">
                        {{ row.manageScope }}
                    </template>
                </el-table-column>

                <el-table-column prop="permissionGroup" label="權限組" width="400" align="center">
                    <template #default="{ row }">
                        <div class="permission-group">
                            <div v-for="group in row.permissionGroup" :key="group" class="group-item">
                                {{ group }}
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="permissions" label="權限配置" align="center">
                    <template #default="{ row }">
                        <div class="permission-list">
                            <div v-for="perm in row.permissions" :key="perm" class="permission-item">
                                {{ perm }}
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="220" fixed="right" align="center">
                    <template #default>
                        <el-button type="text" size="small">重置密碼</el-button>
                        <el-button type="text" size="small">編輯</el-button>
                        <el-button type="text" size="small" class="danger-text">刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination-wrapper">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :small="true" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" />
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { Search, Plus, Setting } from '@element-plus/icons-vue'
import pageTitle from "@/components/pageTitle/pageTitle.vue"

// 靜態數據
const searchQuery = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(5)
const loading = ref(false)

// 管理員列表數據
const adminList = ref([
    {
        id: 1,
        name: '張三',
        phone: '13800138000',
        manageScope: '全部組織',
        permissionGroup: ['人事管理', '招聘管理'],
        permissions: ['通訊錄', '組織管理', '組織架構圖']
    },
    {
        id: 2,
        name: '李四',
        phone: '13900139000',
        manageScope: '華北地區',
        permissionGroup: ['財務管理'],
        permissions: ['財務報表', '收支記錄']
    },
    {
        id: 3,
        name: '王五',
        phone: '13700137000',
        manageScope: '華東地區',
        permissionGroup: ['客戶管理', '訂單管理'],
        permissions: ['客戶列表', '訂單處理']
    },
    {
        id: 4,
        name: '趙六',
        phone: '13600136000',
        manageScope: '總部',
        permissionGroup: ['系統管理'],
        permissions: ['用戶管理', '權限設置']
    },
    {
        id: 5,
        name: '錢七',
        phone: '13500135000',
        manageScope: '全部組織',
        permissionGroup: ['人事管理', '考勤管理'],
        permissions: ['員工檔案', '考勤記錄']
    }
])
</script>
<style scoped lang="less">
.admin-management-container {
    padding: 20px;
    background-color: #fff;

    .top-action-bar {
        margin-bottom: 20px;
        padding: 16px 24px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        margin-top: 20px;

        .search-input-with-button {
            max-width: 500px;

            .el-input-group__append {
                background-color: var(--el-color-primary);
                color: white;
                border: none;

                &:hover {
                    opacity: 0.9;
                }
            }
        }

        .action-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 12px;

            .el-button {
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }
        }
    }

    .admin-table-card {
        padding: 16px;
        background-color: #fff;

        :deep(.el-table) {
            tr:hover td {
                background-color: #f5f7fa !important;
            }
        }

        .admin-info {
            display: flex;
            justify-content: center;

            .admin-name {
                font-weight: 500;
                margin: 0 4px;
            }

            .admin-phone {
                color: #666;
                font-size: 14px;
            }
        }

        .permission-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;

            .group-item {
                padding: 4px 8px;
                background-color: #f0f4ff;
                border-radius: 4px;
                color: #3366ff;
            }
        }

        .permission-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;

            .permission-item {
                padding: 4px 8px;
                background-color: #f0f4ff;
                border-radius: 4px;
                color: #3366ff;
                font-size: 14px;
            }
        }

        .danger-text {
            color: var(--el-color-danger);
        }

        .pagination-wrapper {
            margin-top: 24px;
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>
